<template>
	<view class="mybox" :style="{ background: infodata.agent_state == 1 ? infodata.agent_bg_color : '' }">
		<!-- 头部导航 -->
		<view class="navbar">
			<u-navbar :fixed="false" title=" " @rightClick="xz_go('set')" :safeAreaInsetTop="true" bgColor="rgb(131, 28, 25)" title-color="white">
				<view class="u-nav-slot" slot="left"></view>
				<view class="u-nav-slot" slot="right"><u-icon color="#ffffff" name="setting" size="20"></u-icon></view>
				<view class="title" slot="center">个人中心</view>
			</u-navbar>
		</view>
		<u-gap height="20rpx"></u-gap>
		<view class="user_box" >
			<!-- 头像 -->
			<view class="avatar_box" @click="xz_go('set')"><zui-avatar size="150rpx" :src="infodata.avatar" color="#9D97A7"></zui-avatar></view>
			<view class="user_text">
				<view class="name">
					{{ infodata.nickname }}
					<text v-if="infodata.agent_state == 1">(代理)</text>
				</view>
				<!-- <view class="lever">{{ infodata.vip_name }}</view> -->
				<view class="lever" v-if="infodata.vip_level > 0">
					<view class="image" v-for="item in infodata.vip_level"><image src="@/static/img/level.png"></image></view>
				</view>
				
			</view>
		</view>
		<view class="panel" style="color:#666666">
			<!-- 标题 + 更多 -->
			<zui-title :have_to="false" color="#666666">订单管理</zui-title>
			<u-grid col="3" :border="false" @click="go_order">
				<u-grid-item v-for="(item, index) in order_list" :key="index">
					<u-icon :customStyle="{ paddingTop: 10 + 'rpx' }" :name="item.name" :size="22"></u-icon>
					<text class="grid-text">{{ item.title }}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<zui-flat bgColor="#fff" padding="0">
			<u-grid col="3" :border="false">
				<u-grid-item @click="navlist(1)">
					<zui-col height="174rpx">
						<view class="grid_num">{{ infodata.balance || '0.00' }}</view>
						<view class="grid_text">余额</view>
					</zui-col>
				</u-grid-item>
				<!-- <u-grid-item @click="navlist(2)">
					<zui-col height="174rpx">
						<view class="grid_num">{{ infodata.gold || '0.00' }}</view>
						<view class="grid_text">金元</view>
					</zui-col>
				</u-grid-item> -->
				<u-grid-item @click="navlist(3)">
					<zui-col height="174rpx">
						<view class="grid_num">{{ infodata.vouchers || '0.00' }}</view>
						<view class="grid_text">购物券</view>
					</zui-col>
				</u-grid-item>
				<u-grid-item @click="navlist(4)">
					<zui-col height="174rpx">
						<view class="grid_num">{{ infodata.point_num || '0.00' }}</view>
						<view class="grid_text">金豆</view>
					</zui-col>
				</u-grid-item>
			</u-grid>
		</zui-flat>
		
		<u-gap height="30rpx"></u-gap>
		
		<view class="limit" @click="xz_go('dividends')" ><image src="~@/static/img/jindou.png" mode=""></image></view>
		
		
		<u-gap height="30rpx"></u-gap>
		<!-- 单元格菜单 -->
		<view class="cell_list">
			<u-cell-group :border="false">
				<u-cell :border="false" @click="xz_go('address_list')" :icon="icon01" isLink title="地址管理"></u-cell>
				<u-cell :border="false" :icon="icon02" isLink title="邀请好友" @click="xz_go('invite')"></u-cell>
				<u-cell :border="false" :icon="icon03" isLink title="联系客服" @click="xz_go('service')"></u-cell>
				<u-cell :border="false" :icon="icon04" isLink title="我的朋友" @click="xz_go('friends')"></u-cell>
				<!-- <u-cell :border="false" :icon="icon05" isLink title="优惠活动" @click="xz_go('coupon_list')"></u-cell> -->
				<!-- <u-cell :border="false" :icon="icon06" isLink title="黄金代售" @click="xz_go('sell')"></u-cell> -->
				<u-cell :border="false" :icon="icon07" isLink title="关于我们" @click="xz_go('about')"></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			infodata: {},
			is_vip: true,
			order_list: [
				{
					name: require('@/static/img/oo1.png'),
					title: '我的订单'
				},
				// {
				// 	name: require('@/static/img/oo2.png'),
				// 	title: '以金换金'
				// },
				{
					name: require('@/static/img/oo3.png'),
					title: '金豆订单'
				},
				{
					name: require('@/static/img/oo4.png'),
					title: '商城订单'
				}
			],
			icon01: require('@/static/img/me01.png'),
			icon02: require('@/static/img/me02.png'),
			icon03: require('@/static/img/me03.png'),
			icon04: require('@/static/img/me04.png'),
			icon05: require('@/static/img/me05.png'),
			icon06: require('@/static/img/me06.png'),
			icon07: require('@/static/img/me07.png'),
	
		};
	},
	onLoad: function() {},
	onShow() {
		this.get_info();
	},
	methods: {
		go_order(index) {
			//0 普通商品
			if (index == 0) {
				// uni.navigateTo({ url: '/pages/order/order_list?type='+index});

				uni.$u.route('/pages/index/order_list', {
					type: 1
				});
			}
			// if (index == 1 ) {
			// 	uni.$u.route('pages/swap_gold/order_list', {
			// 		type:2
			// 	});
			// }
			if (index == 1) {
				uni.$u.route('pages/integral/order_list', {
					
				});
			}
		
			if (index == 2) {
				uni.$u.route('/pages/one_mouth/order_list', {
				
				});
			}
		},
		get_info() {
			uni.$u.http
				.get('/app/user/getUserInfo', {
					params: {},
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
					this.infodata = res;
				})
				.catch(err => {});
		},
		navlist(type) {
			uni.navigateTo({
				url: `../mine/wallet?type=${type}`
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.mybox {
	width: 100%;
	min-height: 100vh;
	height: auto;
	/deep/.u-navbar__content {
		background: none;
	}
}
.grid_num {
	text-align: center;
	color: #AA334F;
	font-size: 26rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/deep/.zui-col {
	width: 98%;
}

.grid_text {
	width: 100%;
	text-align: center;
	color: #666666;
	font-size: 26rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* //自定义顶部栏 */
.navbar {
	font-size: 30rpx;
	/deep/.title {
		color: #fff;
	}
	/deep/.u-icon {
		padding: 10rpx;
		border-radius: 50%;
		// background:rgba(35 ,159 ,229,0.85);
	}
	.right_text {
		color: #fff;
	}
}
.user_box {
	padding: 30rpx;
	color: #fff;
	display: flex;
	justify-content: flex-start;
	.avatar_box {
		// margin-right: 30rpx;
	}
	.user_text {
		padding: 10rpx 30rpx;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		.name {
			font-size: 32rpx;
			color:#666;
			
		}
		
		.lever {
			// background: #96aac5;
			// padding: 10rpx 40rpx;
			// border-radius: 30rpx;
			// text-align: center;
			// font-size: 26rpx;
			display:flex;
		}
		.image{
			margin-left:10rpx ;
			width: 40rpx;
			height: 40rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
.panel {
	margin: 0 auto;
	width: 690rpx;
	height: 224rpx;
	background: #fff;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	font-size: 24rpx;
	.grid-text {
		font-size: 24rpx;
		line-height: 3;
	}
	/deep/.u-icon__img {
		height: 48rpx !important;
		width: 48rpx !important;
	}
}
//底部按钮组
.cell_list {
	width: 690rpx;
	margin: 0 auto;
	/deep/.u-cell__title-text {
		color: #333333 !important;
		font-size: 28rpx;
	}
	/deep/.u-cell__left-icon-wrap {
		margin-right: 20rpx;
	}
	/deep/.u-cell--clickable {
		background: #fff;
	}
	/deep/.u-cell {
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}
}

//图片
.limit {
	width: 670rpx;
	height: 252rpx;
	margin: 0 auto;

	image {
		width: 100%;
		height: 100%;
		display: block;
	}
}
</style>
